<template>
  <div class="count-page hiddenScroll">
    <LayoutContainer>
      <div class="count">
        <p align="center">
          <strong>
            <span class="headline">碳足迹计算器</span>
            <br />
            你知道一个塑料袋、一双一次性筷子会在地球上留下多少碳足迹吗？
            <br />
            生活中一些不经意的小事都会给地球加热，而绿色低碳的生活方式不仅可以引领我们走向自然，
            而且可以帮助地球降温。保护一个适宜家园，需要你我小小的行动。
          </strong>
        </p>

        <el-collapse class="collapse" v-model="activeName">
          <el-collapse-item title="🏠住宅" name="1">
            <el-form class="demo-form-inline">
              <el-form-item label="家庭成员数（Family numbers）：">
                <el-select v-model="person" placeholder="家庭成员数" style="width: 240px">
                  <el-option v-for="item in 8" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
              <el-form-item label="冬季是否用暖气取暖？：">
                <el-checkbox label="用暖气" v-model="heat" />
              </el-form-item>
              <el-form-item label="居住面积（Living area）:">
                <el-input v-model="area" placeholder="居住面积" clearable>
                  <template #append>㎡</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每月用电度数（Electricity）：">
                <el-input v-model="electric" placeholder="用电数" clearable>
                  <template #append>度</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每月用天然气（Natural Gas）：">
                <el-input v-model="gas" placeholder="用天然气" clearable>
                  <template #append>立方米</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每月用水（Water）：">
                <el-input v-model="water" placeholder="用水" clearable>
                  <template #append>吨</template>
                </el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>

          <el-collapse-item title="🚗交通" name="2">
            <el-form class="demo-form-inline">
              <el-form-item label="飞机（Aircraft）：">
                <el-input v-model.number="fly" placeholder="千米/年" clearable>
                  <template #append>千米/年</template>
                </el-input>
              </el-form-item>
              <el-form-item label="火车（Train）：">
                <el-input v-model.number="trains" placeholder="千米/年" clearable>
                  <template #append>千米/年</template>
                </el-input>
              </el-form-item>
              <el-form-item label="公交（Bus）：">
                <el-input v-model.number="buses" placeholder="千米/天" clearable>
                  <template #append>千米/天</template>
                </el-input>
              </el-form-item>
              <el-form-item label="地铁（Subway）：">
                <el-input v-model.number="underground" placeholder="站/天" clearable>
                  <template #append>站/天</template>
                </el-input>
              </el-form-item>
              <el-form-item label="私家车/出租/公家车（Taxi）：">
                <el-input v-model.number="cars" placeholder="千米/天" clearable>
                  <template #append>千米/天</template>
                </el-input>
              </el-form-item>
              <el-form-item label="电梯（Elevator）：">
                <el-input v-model.number="lift" placeholder="层/天" clearable>
                  <template #append>层/天</template>
                </el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="⏲️生活习惯" name="3">
            <el-form class="demo-form-inline">
              <el-form-item label="每周消耗塑料袋个数（Plastic bags）：">
                <el-input v-model.number="bags" placeholder="个/周" clearable>
                  <template #append>个/周</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每周消耗一次性筷子（Chopsticks）：">
                <el-input v-model.number="chopstick" placeholder="双/周" clearable>
                  <template #append>双/周</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每半年新买衣服（Clothes）：">
                <el-input v-model.number="dress" placeholder="件/半年" clearable>
                  <template #append>件/半年</template>
                </el-input>
              </el-form-item>
              <el-form-item label="平均每天主食(Rice)：">
                <el-input v-model.number="riceFood" placeholder="碗/天" clearable>
                  <template #append>碗/天</template>
                </el-input>
              </el-form-item>
              <el-form-item label="平均每天肉食(Meat)：">
                <el-input v-model.number="pork" placeholder="盘/天" clearable>
                  <template #append>盘/天</template>
                </el-input>
              </el-form-item>
              <el-form-item label="上班用电脑时间：">
                <el-input v-model.number="computer" placeholder="小时/天" clearable>
                  <template #append>小时/天</template>
                </el-input>
              </el-form-item>
              <el-form-item label="平均每天收发电子邮件数：">
                <el-input v-model.number="email" placeholder="封/天" clearable>
                  <template #append>封/天</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每天使用搜索次数：">
                <el-input v-model.number="webSearch" placeholder="次/天" clearable>
                  <template #append>次/天</template>
                </el-input>
              </el-form-item>
              <el-form-item label="平均每月买书或杂志：">
                <el-input v-model.number="book" placeholder="册/月" clearable>
                  <template #append>册/月</template>
                </el-input>
              </el-form-item>
              <el-form-item label="平均每月打印纸张：">
                <el-input v-model.number="paperA4" placeholder="张/月" clearable>
                  <template #append>张/月</template>
                </el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="🤓您可以减少CO2的好习惯" name="4">
            <el-form class="demo-form-inline">
              <el-form-item label="自行车代步（Bike）：">
                <el-input v-model.number="bicycle" placeholder="千米/天" clearable>
                  <template #append>千米/天</template>
                </el-input>
              </el-form-item>
              <el-form-item label="节能灯泡：">
                <el-checkbox v-model="efficientLights" label="在亮度相等的情况下，节能灯泡比普通钨丝灯泡节省20%的能源" />
              </el-form-item>
              <el-form-item label="我习惯随手关灯：">
                <el-checkbox v-model="turnsOffLights" />
              </el-form-item>
              <el-form-item label="我不使电器处于待机状态：">
                <el-checkbox v-model="equipmentStandby" />
              </el-form-item>
              <el-form-item label="我习惯淋浴而非盆浴：">
                <el-checkbox v-model="showers" />
              </el-form-item>
              <el-form-item label="我循环使用至少30%的家庭废旧物品：">
                <el-checkbox v-model="recycleOld" />
              </el-form-item>
              <el-form-item label="太阳能热水器：">
                <el-checkbox v-model="solarWaterHeater" />
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>

        <div class="result-section">
          <el-button type="primary" @click="calculateResult" class="calc-button">
            计算结果
          </el-button>
          <div v-if="result !== ''" class="result-details">
            <p>您一年排放CO2: {{ result }}(吨)</p>
            <p>13亿中国人每年排放CO2：{{ chineseCO2 }}(吨)</p>
            <p>相当于{{ chineseCO2PPM }}（ppmv/年）</p>
            <p>全球气温会因此增加{{ temperature }}（摄氏度/年）</p>
            <p>除去世界人均森林，您1年消耗的碳排放还需{{ trees }}棵树用10年来抵偿！</p>
          </div>
        </div>
      </div>
    </LayoutContainer>
  </div>
</template>

<script setup>
import LayoutContainer from '@/layout/LayoutContainer.vue'
import { startLoading, stopLoading } from '@/utils/loading'
import { ref } from 'vue'

const person = ref(1)
const heat = ref(false)
const area = ref(10)
const electric = ref(50)
const gas = ref(10)
const water = ref(10)
const fly = ref(0)
const trains = ref(500)
const buses = ref(10)
const underground = ref(10)
const cars = ref(0)
const lift = ref(10)
const bags = ref(10)
const chopstick = ref(10)
const dress = ref(4)
const riceFood = ref(2)
const pork = ref(1)
const computer = ref(4)
const email = ref(2)
const webSearch = ref(10)
const book = ref(2)
const paperA4 = ref(20)
const bicycle = ref(0)
const efficientLights = ref(false)
const turnsOffLights = ref(false)
const equipmentStandby = ref(false)
const showers = ref(false)
const recycleOld = ref(false)
const solarWaterHeater = ref(false)

// 当前展开的折叠面板
const activeName = ref('1')

// 计算结果的方法
const calculateResult = () => {
  startLoading()

  let co2 = 0

  // 住宅部分
  co2 += person.value * (heat.value ? 2.5675 : 0) // 冬季取暖
  co2 += electric.value * 0.00077 // 每度电产生的CO2
  co2 += gas.value * 0.00194 // 每立方米天然气产生的CO2
  co2 += water.value * 0.00025 // 每吨水产生的CO2

  // 交通部分
  co2 += fly.value * 0.00011 // 每千米飞机产生的CO2
  co2 += trains.value * 0.00002 // 每千米火车产生的CO2
  co2 += buses.value * 0.00006 // 每千米公交产生的CO2
  co2 += underground.value * 0.00002 // 每站地铁产生的CO2
  co2 += cars.value * 0.0002 // 每千米私家车产生的CO2
  co2 += lift.value * 0.000005 // 每层电梯产生的CO2

  // 生活习惯部分
  co2 += bags.value * 0.000004 // 每个塑料袋产生的CO2
  co2 += chopstick.value * 0.0000002 // 每双一次性筷子产生的CO2
  co2 += dress.value * 0.016667 // 每件衣服产生的CO2
  co2 += riceFood.value * 0.000185 // 每碗米饭产生的CO2
  co2 += pork.value * 0.00165 // 每盘肉产生的CO2
  co2 += computer.value * 0.00005 // 每小时电脑产生的CO2
  co2 += email.value * 0.000001 // 每封邮件产生的CO2
  co2 += webSearch.value * 0.0000005 // 每次搜索产生的CO2
  co2 += book.value * 0.00003 // 每本杂志产生的CO2
  co2 += paperA4.value * 0.000005 // 每张A4纸产生的CO2

  // 减少CO2的好习惯
  if (efficientLights.value) co2 -= 0.00015 * person.value * 365 // 假设每人每天使用节能灯泡节省0.00015吨CO2
  if (turnsOffLights.value) co2 -= 0.00005 * person.value * 365 // 假设每人每天关闭不必要的灯节省0.00005吨CO2
  if (equipmentStandby.value) co2 -= 0.00003 * person.value * 365 // 假设每人每天避免电器待机状态节省0.00003吨CO2
  if (showers.value) co2 -= 0.0001 * person.value * 365 // 假设每人每天淋浴代替盆浴节省0.0001吨CO2
  if (recycleOld.value) co2 -= 0.00002 * person.value * 365 // 假设每人每天回收利用30%的废旧物品节省0.00002吨CO2
  if (solarWaterHeater.value) co2 -= 0.00005 * person.value * 365 // 假设每人每天使用太阳能热水器节省0.00005吨CO2

  // 自行车代步减少的CO2
  co2 -= bicycle.value * 0.00005 * 365 // 假设每天骑行1千米节省0.00005吨CO2

  // 确保CO2值不为负数
  co2 = Math.max(co2, 0)

  console.log(co2)

  // 计算结果
  result.value = co2.toFixed(2)
  chineseCO2.value = (co2 * 1300000000).toFixed(2)
  chineseCO2PPM.value = (chineseCO2.value / 1000000000000).toFixed(2)
  temperature.value = (chineseCO2PPM.value * 0.00001).toFixed(2)
  trees.value = (co2 / 0.0003).toFixed(2)

  setTimeout(() => {
    stopLoading()
  }, 1000)
}

// 结果变量
const result = ref('')
const chineseCO2 = ref('')
const chineseCO2PPM = ref('')
const temperature = ref('')
const trees = ref('')
</script>

<style scoped less="scss">
.count {
  width: 100%;
  border-radius: 10px;
  margin: 70px 0 50px 0px;

  p {
    font-size: 16px;
    color: grey;
  }

  .headline {
    font-size: 2rem;
    color: #333;
  }

  .collapse {
    width: 90%;
    border-radius: 5px;
    overflow: hidden;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    .demo-form-inline {
      width: 90% !important;
      margin: 0 auto;
    }
  }

  .result-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

    .calc-button {
      width: 800px;
    }

    .result-details {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      width: 90%;
      margin-top: 50px;
      background-color: white;
      border-radius: 5px;
      transition: all 0.5s;
      cursor: pointer;
      font-size: 14px;
      color: grey;
    }

    .result-details:hover {
      box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
